<template>
    <div>
        <!-- 导航栏 -->
        <van-nav-bar title="实训云平台" :placeholder="true" :fixed="true" />


        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1.广告位招租</van-swipe-item>
            <van-swipe-item>2.价格超实惠</van-swipe-item>
            <van-swipe-item>3.性价比超高</van-swipe-item>
            <van-swipe-item>4.用过都说好</van-swipe-item>
        </van-swipe>


        <div v-if="role">
            <van-grid :gutter="10" :column-num="3" :clickable="true">
                <van-grid-item icon="cluster-o" text="班级管理" to="/classinfo" />
                <van-grid-item icon="user-circle-o" text="学生管理" to="/studentinfo" />
                <van-grid-item icon="notes-o" text="任务管理" to="/taskinfo" />
                <van-grid-item icon="newspaper-o" text="资源管理" to="/resourcesview" />
                <van-grid-item icon="question-o" text="答疑管理" to="/discuss" />
                <van-grid-item icon="video-o" text="视频管理" to="/video" />
            </van-grid>
        </div>
        <div v-else>    
            <van-grid :gutter="10" :column-num="2" :clickable="true">
                <van-grid-item icon="notes-o" text="任务详情" to="/stutaskinfo" />
                <van-grid-item icon="newspaper-o" text="资源管理" to="/resourcesvinfo" />
                <van-grid-item icon="question-o" text="答疑管理" to="/studentDiscuss" />
                <van-grid-item icon="video-o" text="视频管理" to="/studentVideo" />
            </van-grid>
        </div>

         <!-- 加载动画 -->
         <loading v-if="loadingStatus"></loading>
    </div>

</template>
<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
<script>

export default {
    name: 'HomeIndex',
    data() {
        return {
            role: this.$store.state.user.userType == 1 ? true : false,
            fixed: '',
            placeholder: '',
            
            // 加载动画
            loadingStatus: true,

        };
    },
    methods: {
    },
    computed: {
    },
    mounted() {
        setTimeout(async () => {
            this.loadingStatus = false;
        }, 1000);
    },
}
</script>